<template>
  <div class="play-control">
    <img id="speed" :src="speedSrc" @mouseover="playMouseAction('speed', 'over')"
         @mouseout="playMouseAction('speed', 'put')" @click="changeSpeed()">
    <img id="play" :src="playSrc" @click="playAction()" @mouseover="playMouseAction('play', 'over')"
         @mouseout="playMouseAction('play', 'put')">
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import config from '../../../myconf';
  import eventBus from '../../../util/event-bus';

  export default {
    name: 'play-control',
    data() {
      return {
        playState: config.PLAY_START,
        speedIndex: 4,
        imgUrl:'static/images/history',
        speedSrc: 'static/images/history/speed-icon-4.png',
        playSrc: 'static/images/history/play-icon.png'
      }
    },
    computed: {
      ...mapGetters(['speed']),
    },
    mounted(){
//      eventBus.$on("historyFinish",() => {
//        this.playSrc = this.imgUrl + '/play-icon.png';
//        this.playState = config.PLAY_START
//      });
//      eventBus.$on("initPlayAxis",() => {
//        this.playSrc = this.imgUrl + '/play-icon.png';
//        this.playState = config.PLAY_START
//      });
//      eventBus.$on("timeEvent",(bool) => {
//        this.playSrc = this.imgUrl + '/play-icon.png';
//        this.playState = config.PLAY_START
//      });
    },
    methods: {
      ...mapMutations(['updateHistorySpeed']),
      playMouseAction(type, eventType) {
        if (eventType === 'over') {
          if (type === 'play' && this.playState === config.PLAY_PAUSE) {
            this[`${type}Src`] = this.imgUrl + `/pause-icon-hover.png`;
          } else if (type === 'play' && this.playState === config.PLAY_START) {
            this[`${type}Src`] = this.imgUrl + `/play-icon-hover.png`;
          } else if (type === 'speed') {
            this[`${type}Src`] = this.imgUrl + `/speed-icon-hover-${this.speedIndex}.png`;
          } else {
            this[`${type}Src`] = this.imgUrl + `/${type}-icon-hover.png`
          }
        } else {
          if (type === 'play' && this.playState === config.PLAY_PAUSE) {
            this[`${type}Src`] = this.imgUrl + `/pause-icon.png`;
          } else if (type === 'play' && this.playState === config.PLAY_START) {
            this[`${type}Src`] = this.imgUrl + `/play-icon.png`;
          } else if (type === 'speed') {
            this[`${type}Src`] = this.imgUrl + `/speed-icon-${this.speedIndex}.png`;
          } else {
            this[`${type}Src`] = this.imgUrl + `/${type}-icon.png`
          }
        }
      },
      playAction() {
        if (this.playState === config.PLAY_PAUSE) {
          this.playState = config.PLAY_START;
          this.playSrc = this.imgUrl + '/play-icon-hover.png';
          eventBus.$emit('changePlayState', {action: config.PLAY_START});
        } else {
          this.playState = config.PLAY_PAUSE;
          this.playSrc = this.imgUrl + '/pause-icon-hover.png';
          eventBus.$emit('changePlayState', {action: config.PLAY_PAUSE});
        }

      },
      changeSpeed(){
        let imgIndex = this.speedIndex;
        let curSpeed = this.speed;
        eventBus.$emit("updateHistoryAxis");
        if (imgIndex < 5) {
          imgIndex++;
        } else {
          imgIndex = 1;
        }
        this.speedIndex = imgIndex;
        this.speedSrc = this.imgUrl + `/speed-icon-hover-${this.speedIndex}.png`;
        switch (this.speedIndex) {
          case 1:
            curSpeed = 6000;
            break;
          case 2:
            curSpeed = 3000;
            break;
          case 3:
            curSpeed = 1500;
            break;
          case 4:
            curSpeed = 750;
            break;
          case 5:
            curSpeed = 375;
            break;
          default:
            curSpeed = 750;
            break;
        }
        this.updateHistorySpeed(curSpeed);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .play-control {
    position: absolute;
    bottom: 20px;
    left: -85px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    img {
      display: block;
      cursor: pointer;
    }
    #back {
      vertical-align: middle;
    }
    #play {
      vertical-align: middle;
      margin-top: 15px;
    }
    #forward {
      vertical-align: middle;
      margin-left: 13px;
    }
  }

</style>
